<template>
  <div class="singer">
    <div class="sort">
      <p>
        <span
          v-for="item in area"
          :key="item.id"
          @click="isarea(item.id)"
          :class="{ span1: item.id == areaid }"
        >
          {{ item.cont }}</span
        >
      </p>
      <p>
        <span
          v-for="item in type"
          :key="item.id"
          @click="istype(item.id)"
          :class="{ span1: item.id == typeid }"
          >{{ item.cont }}</span
        >
      </p>
    </div>
    <p class="hot">{{ tit }}</p>
    <div class="content">
      <p
        v-for="item in sortList"
        :key="item.id"
        @click="toSingerDetail(item.id)"
      >
        <img :src="item.picUrl" alt="" />
        <span class="name">{{ item.name }}</span>
        <span class="follow" @click="follow($event)">+ 关注</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      area: [
        { id: -1, cont: "全部" },
        { id: 7, cont: "华语" },
        { id: 96, cont: "欧美" },
        { id: 8, cont: "日本" },
        { id: 16, cont: "韩国" },
        { id: 0, cont: "其他" },
      ], //地区
      type: [
        { id: -1, cont: "全部" },
        { id: 1, cont: "男歌手" },
        { id: 2, cont: "女歌手" },
        { id: 3, cont: "乐队" },
      ], //类型
      areaid: "-1",
      typeid: "-1",
      sortList: [],
      tit: "热门歌手",
      page: 1, //每页返回的数量，默认为1
    };
  },
  computed: {},
  watch: {},
  methods: {
    isarea(id) {
      //   console.log(id);
      this.tit = "地区和类型分类";
      this.areaid = id;
      this.init();
    },
    istype(id) {
      //   console.log(id);
      this.tit = "地区和类型分类";
      this.typeid = id;
      this.init();
    },
    async init() {
      console.log(this.areaid, this.typeid);
      this.isHot = false;
      const res = await this.$http.get(
        `http://localhost:3000/artist/list?type=${this.typeid}&area=${this.areaid}`
      );
      // console.log(res);
      if (res.data.code == 200) {
        this.sortList = res.data.artists;
        console.log("歌手列表", this.sortList);
      } else {
        console.log("歌手列表获取失败");
      }
    },
    //点击关注歌手
    follow(e) {
      // console.log(id, e.path[0]);
      if (e.path[0].innerHTML == "+ 关注") {
        this.$http
          .get("http://localhost:3000/artist/sub?id=6452&t=1")
          .then((res) => {
            // console.log(res);
            if (res.status == 200) {
              e.path[0].innerHTML = "已关注";
            }
          });
      } else {
        this.$http
          .get("http://localhost:3000/artist/sub?id=6452&t=0")
          .then((res) => {
            // console.log(res);
            if (res.status == 200) {
              e.path[0].innerHTML = "+ 关注";
            }
          });
      }
    },
    //点击获取歌手id，并跳转到歌手详情列表
    toSingerDetail(id) {
      console.log(id);
      this.$router.push({
        path: "/singerDetail/" + id,
      });
    },
  },
  created() {
    this.init();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.sort {
  height: 70px;
  background: #fff;
  padding: 15px;
}
.sort p {
  display: flex;
  font-size: 14px;
}
.sort p:first-child {
  margin-bottom: 20px;
}
.sort p span {
  margin-right: 15px;
  padding: 1px 3px;
  background: rgb(241, 241, 241);
  border-radius: 5px;
}
.sort p .span1 {
  background: rgb(247, 159, 163);
  color: #fff;
}
.hot {
  font-size: 12px;
  color: rgb(77, 77, 77);
  margin: 10px 0;
  padding-left: 15px;
  letter-spacing: 1px;
}
.content {
  background: #fff;
  padding: 0 15px 50px 15px;
}
.content p {
  height: 60px;
  display: flex;
  align-items: center;
}
img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
}
.name {
  flex: 1;
  font-size: 14px;
  margin-left: 10px;
}
.follow {
  font-size: 12px;
  padding: 3px 5px;
  letter-spacing: 1px;
  border: 1px solid red;
  color: red;
  border-radius: 10px;
}
</style>
